/*第1页，banner页面*/
.active .banner-img{
    opacity: 1;
    -webkit-transform: translate(0,0) scale(1);
    -moz-transform: translate(0,0) scale(1);
    transform: translate(0,0) scale(1);
    transition-delay: 1s;
}
.active .banner-desc{
    opacity: 1;
    -webkit-transform: translateY(0px) translateZ(0);
    -moz-transform: translateY(0px) translateZ(0);
    transform: translateY(0px) translateZ(0);
    transition-delay: 2s;
}
/*固定第一页*/
.fixed .banner-img{
    opacity: 1;
    -webkit-transform: translate(0,0) scale(1);
    -moz-transform: translate(0,0) scale(1);
    transform: translate(0,0) scale(1);
    transition-delay: 1s;
}
.fixed .banner-desc{
    opacity: 1;
    -webkit-transform: translateY(0px) translateZ(0);
    -moz-transform: translateY(0px) translateZ(0);
    transform: translateY(0px) translateZ(0);
    transition-delay: 2s;
}
/*第2页，大灯页面*/
.active .light-desc{
    opacity: 1;
    -webkit-transform: translateY(0px) translateZ(0);
    -moz-transform: translateY(0px) translateZ(0);
    transform: translateY(0px) translateZ(0);
    transition-delay: 2s;
}
.active .light-img{
    -webkit-transform: translateY(0px) translateZ(0);
    -moz-transform: translateY(0px) translateZ(0);
    transform: translateY(0px) translateZ(0);
    opacity: 1;
    transition-delay: 1s;
}

/*第3页，细节页面*/
.active .details-desc{
    opacity: 1;
    -webkit-transform: translateY(0px) translateZ(0);
    -moz-transform: translateY(0px) translateZ(0);
    transform: translateY(0px) translateZ(0);
    transition-delay: 2s;
}
.active .details-img{
    -webkit-transform: translateX(0px) translateY(0px);
    -moz-transform: translateX(0px) translateY(0px);
    transform: translateX(0px) translateY(0px);
    opacity: 1;
    transition-delay: 1s;
}
/*第4页，车架页面*/
.active .frame-desc{
    opacity: 1;
    -webkit-transform: translateY(0px) translateZ(0);
    -moz-transform: translateY(0px) translateZ(0);
    transform: translateY(0px) translateZ(0);
    transition-delay: 2s;
}
.active .frame-img{
    -webkit-transform: translateX(0px) translateY(0px);
    -moz-transform: translateX(0px) translateY(0px);
    transform: translateX(0px) translateY(0px);
    opacity: 1;
    transition-delay: 1s;
}
/*第5页，镀铬部件页面*/
.active .chrome-desc{
    opacity: 1;
    -webkit-transform: translateY(0px) translateZ(0);
    -moz-transform: translateY(0px) translateZ(0);
    transform: translateY(0px) translateZ(0);
    transition-delay: 2s;
}
/*镀铬光泽效果*/
.active .mask {
    -webkit-animation: maskmove-ant 2s 1 ease;
    -moz-animation: maskmove-ant 2s 1 ease;
    -ms-animation: maskmove-ant 2s 1 ease;
    animation: maskmove-ant 2s 1 ease;
}
/*镀铬光泽动画效果*/
@-webkit-keyframes maskmove-ant{
    0%{
        opacity: 1;
        -webkit-transform: translate(239px,124px);
    }
    100%{
        opacity: 0;
        -webkit-transform: rotate(3deg) translate(657px,86px);
    }
}
@-moz-keyframes maskmove-ant{
    0%{
        opacity: 1;
        -moz-transform: translate(239px,124px);
    }

    100%{
        opacity: 0;
        -moz-transform: rotate(3deg) translate(657px,86px);
    }
}
@-ms-keyframes maskmove-ant{
    0%{
        opacity: 1;
        -moz-transform: translate(239px,124px);
    }
    100%{
        opacity: 0;
        -moz-transform: rotate(3deg) translate(657px,86px);
    }
}

/*第6页，骑行页面*/
.active .cycling-desc {
    opacity: 1;
    -webkit-transform: translateY(0px) translateZ(0);
    -moz-transform: translateY(0px) translateZ(0);
    transform: translateY(0px) translateZ(0);
    transition-delay: 1s;
}
.active .cycling-img{
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1;
    transition-delay: 2s;
}

/*次序一*/
.active .circle2{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 3s;
}
/*次序二*/
.active .line1{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 4s;
    transition-timing-function: linear
}
/*次序三*/
.active .circle3{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 5s;
    transition-timing-function: linear
}
/*次序四*/
.active .line2{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 6s;
    transition-timing-function: linear
}
/*次序五*/
.active .circle1{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 7s;
    transition-timing-function: linear
}
/*次序六*/
.active .line3{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 8s;
    transition-timing-function: linear
}

/*固定第六页*/
.fixed .cycling-desc {
    opacity: 1;
    -webkit-transform: translateY(0px) translateZ(0);
    -moz-transform: translateY(0px) translateZ(0);
    transform: translateY(0px) translateZ(0);
    transition-delay: 1s;
}
.fixed .cycling-img{
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1;
    transition-delay: 2s;
}

/*次序一*/
.fixed .circle2{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 3s;
}
/*次序二*/
.fixed .line1{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 4s;
    transition-timing-function: linear
}
/*次序三*/
.fixed .circle3{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 5s;
    transition-timing-function: linear
}
/*次序四*/
.fixed .line2{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 6s;
    transition-timing-function: linear
}
/*次序五*/
.fixed .circle1{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 7s;
    transition-timing-function: linear
}
/*次序六*/
.fixed .line3{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 8s;
    transition-timing-function: linear
}